<template>
    <a-modal
      v-model:visible="visible"
      title="查看消息已推送的用户"
      @ok="handleOk"
    >
      <a-table
        :columns="columns"
        :data-source="data"
        rowKey="app_user_id"
        size="small"
      >
        <template #name="{ text }">
          <p v-if="text">{{ text }}</p>
          <p v-else>/</p>
        </template>
        <template #isConfirm="{ text }">
          <p v-if="text === true">已确认</p>
          <p v-else style="color: red;font-weight:bold">未确认</p>
        </template>
      </a-table>
      <template #footer>
        <a-button key="choose" type="primary" @click="ChooseMpUsers"
          >选择推送用户</a-button
        >
        <!-- <a-button key="submit" type="primary" @click="handleOk">确定</a-button> -->
      </template>
    </a-modal>
    <choose-mp-users ref="openChild" @chosUser="chosUser" />
  </template>
  <script lang="ts">
  import { defineComponent, onUpdated, ref, Ref } from "vue";
  import { message } from "ant-design-vue";
  import ChooseMpUsers from "./chooseuser.vue";
  import { get, post } from "../utils/request/request";
  
  const columns = [
    {
      title: "小程序用户名",
      dataIndex: "app_user_name",
      align: "center",
      ellipsis: true,
      slots: { customRender: "name" },
    },
    {
      title: "是否确认",
      dataIndex: "is_confirm",
      align: "center",
      slots: { customRender: "isConfirm" },
    },
  ];
  
  interface DataItem {
    app_user_id: number;
    app_user_name: string;
    is_confirm: boolean;
  }
  
  const data: Ref<DataItem[]> = ref([]);
  
  //modal
  const useModalEffect = () => {
    const visible = ref<boolean>(false);
    const openChild = ref();
    const ChooseMpUsers = () => {
      openChild.value.showModal();
    };
    const showModal = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    return { visible, openChild, ChooseMpUsers, showModal, handleOk };
  };
  
  // 网络请求
  const useHttpEffect = (id: number) => {
    const token: string = localStorage.getItem("token") as string;
    const chosUser = async (idList: string[]) => {
      const res: any = await post(
        `/admin/api/v1/message/${id}/push`,
        {
          app_id_id: idList,
        },
        token
      );
      console.log(res);
      if (res?.code === 0) {
        if (res?.data?.result === 0) {
          message.success("推送成功");
          getData();
        }
      }
    };
    const getData = async () => {
      const res: any = await get(`/admin/api/v1/message/${id}`, token);
      console.log(res);
      if (res?.data?.push_to == null) {
        message.info("该消息未推送");
      } else {
        data.value = res?.data?.push_to;
      }
    };
    return { chosUser, getData };
  };
  
  export default defineComponent({
    props: ["id"],
    components: {
      ChooseMpUsers,
    },
    setup(props) {
      const id = props.id;
      const { visible, openChild, ChooseMpUsers, showModal, handleOk } =
        useModalEffect();
      const { chosUser, getData } = useHttpEffect(id);
  
      onUpdated(() => {
        if (visible.value) {
          getData();
        }
      });
      return {
        visible,
        showModal,
        openChild,
        ChooseMpUsers,
        handleOk,
        columns,
        data,
        chosUser,
      };
    },
  });
  </script>
  
  